<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shadow DOM</title>
<meta name="author" content="yyl" />
<style type="text/css">
html, body {
	height: 100%;
	overflow: hidden;
}

#title {
	color: blue;
}
</style>
</head>
<body>
	<p>Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。</p>
	<p>Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。</p>
	<h1 id="title">hello</h1>
	<div id="host"></div>
	<script>
		HTMLElement.prototype.attachShadow = HTMLElement.prototype.attachShadow || HTMLElement.prototype.createShadowRoot || HTMLElement.prototype.webkitCreateShadowRoot;
		// 给指定的元素挂载一个Shadow DOM，并且返回对 ShadowRoot 的引用
		var shadow = document.querySelector('#host').attachShadow({
			mode : 'open'
		});
		shadow.innerHTML = '<style>:host{border: 1px solid blue;width:200px;box-sizing:border-box;} #title {color: red;}</style><h1 id="title">hello</h1>';
	</script>
</body>
</html>